<template>
  <section class='f-share-h5'>
    <template v-if="isWechat">
      <section style="background:#888785;height:100%" @click="isWechat = false">
        <img style="width:100%;" src="@/assets/imgs/guide.jpg" alt="">
      </section>
    </template>

    <template v-else>
      <div class="f-position">
        <van-button class="f-btn" type="default" @click="downLoadApp">
          <span>下载智享App</span>
          <img class="f-img" src="@/assets/icons/download_icon_arrows.png" alt="">
        </van-button>
      </div>
    </template>
  </section>
</template>

<script>
import { reactive, toRef, toRefs } from 'vue'
import api from './api'
import { showToast } from 'vant'

export default {
  setup() {
    const state = reactive({
      isWechat: false,
      apkDownLoadUrl: null,
      apkName: null,
    })

    // 判断终端类型
    const getUserAgent = () => {
      return new Promise((resolve, reject) => {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 || u.indexOf('ANDROID') > -1; // android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
        /**
         * 1 安卓
         * 2 IOS
         * 3 PC
         */
        resolve(1)

        if (isAndroid) {
          resolve(1)
        } else if (isiOS) {
          resolve(2)
        } else {
          resolve(3)
        }
      })
    }

    async function getNewApk() {
      const obj = {
        packageName: 'com.quanxun.zhixiang'
      }
      await api.packageLast(obj).then(res => {
        if (res.code == '200') {
          state.apkDownLoadUrl = res.data.filepath
          state.apkName = getApkName(res.data.filepath)
        } else {
          showToast(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function getApkName(filepath) {
      if (!filepath) return false
      const spList = filepath.split('/')
      return spList[spList.length - 1]
    }

    function downloadFile(fileUrl, fileName) {
      const link = document.createElement("a")
      let _fileHref = fileUrl
      link.href = _fileHref
      link.setAttribute("download", fileName)
      link.style.display = "none"
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }

    async function downLoadApp() {
      state.isWechat = isWeichatFn()
      if (!state.isWechat) {
        await getNewApk()
        downloadFile(state.apkDownLoadUrl, state.apkName)
      }
    }

    // 判断是否在微信内
    function isWeichatFn() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        return true;
      } else {
        return false;
      }
    }

    return {
      ...toRefs(state),
      downLoadApp,
    }
  }
}
</script>

<style lang='scss' scoped>
.f-share-h5 {
  background-image: url("@/assets/imgs/share_h5_pic.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  background-color: #efefef;
  position: relative;
  .f-position {
    width: 100%;
    position: absolute;
    bottom: 50px;
    text-align: center;
    .f-logo {
      width: 92px;
      height: 92px;
      border-radius: 15px;
    }
    .f-logo-name {
      font-weight: 500;
      font-size: 20px;
      color: #131e7f;
      margin: 20px 0 50px 0;
    }
    .f-btn {
      font-size: 16px;
      color: #3967d9;
      text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.97);
      padding: 12px 45px;
      border-radius: 10px;
      .f-img {
        width: 19px;
        height: 11px;
        margin-left: 8px;
      }
    }
  }
}
</style>